<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="事项标题：" prop="itemName">
        <el-input
          v-model="queryParams.id"
          placeholder=""
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="模块名称：" prop="module">
        <el-input
          v-model="queryParams.first"
          placeholder=""
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务名称：" prop="taskName">
        <el-input
          v-model="queryParams.email"
          placeholder=""
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="待办人名称：" prop="todoUserName">
        <el-input
          v-model="queryParams.email"
          placeholder=""
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="处理人名称：" prop="handleUserName">
        <el-input
          v-model="queryParams.email"
          placeholder=""
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="MyDoneList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"  align="center" />
      <el-table-column label="事项标题" prop="itemName" min-width="6%" />
      <el-table-column label="事项内容" prop="itemContent"  min-width="6%" />
      <el-table-column label="模块名称" prop="module"  min-width="6%" />
      <el-table-column label="任务 ID" prop="taskId"  min-width="8%" />
      <el-table-column label="任务名称" prop="taskName"  min-width="12%" />
      <el-table-column label="待办人名称" prop="todoUserName"  min-width="8%" />
      <el-table-column label="处理人名称" prop="handleUserName"  min-width="8%" />
      <el-table-column label="通知时间" min-width="12%">
        <template slot-scope="scope">
          <span>{{ moment(scope.row.todoTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理时间" prop="handleTime"  min-width="12%">
        <template slot-scope="scope">
          <span>{{ moment(scope.row.handleTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已办任务名称" min-width="10%" >
        <template slot-scope="scope">
          <span style="color:#F00; font-weight:bold">{{ scope.row.nodeName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        min-width="30%"
      >
        <template slot-scope="scope">
            <el-button
              size="small"
              type="success"
              round
              icon="el-icon-info"
              @click="handleFormData(scope.row)"
            >申请详情</el-button>
            <el-button
              size="small"
              type="warning"
              round
              icon="el-icon-circle-close"
              @click="handleHistory(scope.row)"
            >审批历史</el-button>
            <el-button
              size="small"
              type="danger"
              round
              icon="el-icon-news"
              @click="handleSuspend(scope.row)"
            >进度查看</el-button>
        </template>
      </el-table-column>
   </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 表单数据弹出层 -->
    <el-dialog :visible.sync="dialogParams.fdOpen" :title="dialogParams.fdTitle" width="600px" append-to-body>
      <el-form ref="form" :model="formData" label-width="90px">
        <el-form-item label="申请人：">
          <el-input v-model="formData.applyUserName" placeholder :readonly="true" />
        </el-form-item>
        <el-form-item label="标题：">
          <el-input v-model="formData.title" placeholder :readonly="true" />
        </el-form-item>
        <el-form-item label="原因：">
          <el-input v-model="formData.reason" placeholder :readonly="true" />
        </el-form-item>
        <el-form-item label="开始时间: ">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            :readonly="true"
            v-model="formData.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间: ">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            :readonly="true"
            v-model="formData.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="请假时长: ">
          <el-input v-model="viewTotalTime.formDataTotalTime" placeholder :readonly="true" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogParams.fdOpen = false">关闭</el-button>
      </div>
    </el-dialog>

     <!-- 审批历史对话框  -->
    <el-dialog :visible.sync="dialogParams.historyOpen" :title="dialogParams.historyTitle" width="900px" append-to-body>
      <el-form :model="historyQueryParams" ref="queryForm" :inline="true">
        <el-form-item label="任务名称: " prop="activityName">
          <el-input
            v-model="historyQueryParams.activityName"
            placeholder="请输入任务名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="办理人ID: " prop="assignee">
          <el-input
            v-model="historyQueryParams.assignee"
            placeholder="请输入办理人ID"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryHis">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryHis">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="historyLoading" :data="historyList">
        <el-table-column label="任务名称" align="center" prop="activityName" min-width="12%" />
        <el-table-column label="办理人" align="center" prop="assigneeName" min-width="12%" />
        <el-table-column label="审批意见" align="center" prop="comment" min-width="12%" />
        <el-table-column label="开始时间" align="center" prop="startTime" min-width="15%">
          <template slot-scope="scope">
            <span>{{ moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center" prop="endTime" min-width="15%">
          <template slot-scope="scope">
            <span>{{ moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="耗时" align="center" prop="durationInMillis" min-width="15%">
          <template slot-scope="scope">
            <span>{{ formatTotalDateSub(scope.row.durationInMillis/1000) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
      v-show="historyListTotal>0"
      :total="historyListTotal"
      :page.sync="historyQueryParams.pageNum"
      :limit.sync="historyQueryParams.pageSize"
      @pagination="getHistoryList"
    />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogParams.readResourceOpen"
      :title="dialogParams.readResourceTitle"
      width="800px"
      append-to-body
    >
      <div>
        <el-image />
      </div>
    </el-dialog>
 </div>
</template>

<script>

import { listMyDone } from "@/api/process/todoList/myDone";
import { listHistory } from "@/api/process/processMenu/definition";

export default {
  name: "MyDone",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 角色表格数据
      MyDoneList: [],
      // 弹出层参数
       // 审批历史表格数据
      historyList: [],
      historyLoading: true,
      historyListTotal: 0,
      dialogParams: {
        // 表单数据弹出层
        fdOpen: false,
        fdTitle: "",
        // 历史审批弹出层
        historyOpen: false,
        historyTitle: "",
      },
       historyQueryParams: {
        pageNum: 1,
        pageSize: 10,
        activityName: undefined,
        assign: undefined
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemName: undefined,
        module: undefined,
        taskName: undefined,
        todoUserName: undefined,
        handleUserName: undefined
      },
      // 表单数据
      formData: {
        totalTime: undefined
      },
      // 显示作用的totalTIme
      viewTotalTime: {
        formDataTotalTime: undefined
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      }
    };

  },
  created() {
    this.getList();
    
  },
  methods: {
    // 计算时间差，单位: xx天xx时xx分xx秒
    formatTotalDateSub (row, column) {
      let secondSub = row;
      var days = Math.floor(secondSub / (24 * 3600));     // 计算出小时数
      var leave1 = secondSub % (24*3600) ;                // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / 3600);              // 计算相差分钟数
      var leave2 = leave1 % (3600);                       // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / 60);              // 计算相差秒数
      var leave3 = leave2 % 60;                           // 计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3);
      return days + " 天 " + hours + " 时 " + minutes + " 分 " + seconds + ' 秒';
      },

    /** 查询角色列表 */
    getList() {
      this.loading = true;
      listMyDone(this.queryParams).then(
        response => {
          this.MyDoneList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
      /** 查询历史审核列表 */
    getHistoryList(row) {
      this.historyLoading = true;
      var params = new URLSearchParams();
      params.append("instanceId", row.instanceId);
        listHistory(params).then(response => {
        this.historyList = response.rows;
        this.historyListTotal = response.total;
        this.historyLoading = false;
        }).catch(function() {});
    },

     /**表单数据按钮操作 */
    handleFormData(row) {
      this.viewTotalTime.formDataTotalTime = this.formatTotalDateSub(row.totalTime);
      this.formData = row;
      this.dialogParams.fdOpen = true;
      this.dialogParams.fdTitle = "申请详情";
    },

    /** 历史审批按钮操作 */
    handleHistory(row) {
      this.dialogParams.historyOpen = true;
      this.dialogParams.historyTitle = "查看历史审批";
      this.getHistoryList(row);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 历史审批搜索按钮操作 */
    handleQueryHis() {
      this.queryParams.pageNum = 1;
      this.getHistoryList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 历史审批重置按钮操作 */
    resetQueryHis() {
      this.resetForm("historyQueryParams");
      this.handleQueryHis();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    }
  }
};
</script>